{% extends "backend/base.html" %}
{% block head %}
    {{ super() }}
    <!--suppress ALL -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/3.8.5/echarts-en.common.js"></script>
    <style>
        .server-status-div{
            margin: 10px 10px 10px 0px;
            padding: 8px;
            border: #cccccc 2px solid;
            background: #ddddee;
            border-radius: 5px;
        }
        .title-p{
            font-weight: bold;
        }
    </style>
{% endblock %}
{% block title %}
    服务器当前状态
{% endblock %}

{% block content %}
    <main>
        <div class="container">
            <h4><b><i class="fa fa-server"></i> 服务器状态</b></h4>
            <div class="server-status-div">
                <span style="border-bottom: #20c997 2px solid;"><b>CPU状态</b></span>
                <br>
                <br>
                <p class="title-p">核心数: <label class="label label-default">{{ cpu_counts }}</label></p>
                <p class="title-p">使用率: <label class="label label-success"><span id="cpuRate">{{ cpu_use_rate }}%</span></label></p>
                <p class="title-p">历史曲线: </p>
                <div id="cpuRateCurve" style="width: 100%;height:300px;"></div>
            </div>
            <div class="server-status-div">
                <span style="border-bottom: #20c997 2px solid;"><b>内存状态</b></span>
                <br>
                <br>
                <p class="title-p">内存总数: <label class="label label-default">{{ memory_total }}G</label></p>
                <p class="title-p">已使用: <label class="label label-danger">{{ memory_used }}G</label></p>
                <p class="title-p">使用率: <label class="label label-success">{{ mem_percent }}%</label></p>
                <p class="title-p">历史曲线: </p>
                <div id="memoryRateCurve" style="width: 100%;height:300px;"></div>
            </div>
            <div class="server-status-div">
                <span style="border-bottom: #20c997 2px solid;"><b>磁盘状态</b></span>
                <br>
                <br>
                <p class="title-p">磁盘大小: <label class="label label-default">{{ disk_total }}G</label></p>
                <p class="title-p">已用大小: <label class="label label-danger">{{ disk_used }}G</label></p>
                <p class="title-p">未用大小: <label class="label label-success">{{ disk_free }}G</label></p>

                <div id="diskPie" style="width: 100%;height:300px;"></div>
            </div>
            <div class="server-status-div">
                <span style="border-bottom: #20c997 2px solid;"><b>网络状态</b></span>
                <br>
                <br>
                <div class="row">
                    <div class="col-md-2"></div>
                    <div class="col-md-2"><p class="title-p">发送数据: <label class="label label-success"><span id="netSend">{{ (net.bytes_sent/1024/1024)|round(2, 'floor') }}</span>M</label></p></div>
                    <div class="col-md-2"><p class="title-p">接收数据: <label class="label label-success"><span id="netRec">{{ (net.bytes_recv/1024/1024)|round(2, 'floor')}}</span>M</label></p></div>
                    <div class="col-md-2"><p class="title-p">发送数据包: <label class="label label-success"><span id="netSendPkg">{{ net.packets_sent }}</span>个</label></p></div>
                    <div class="col-md-2"><p class="title-p">接收数据包: <label class="label label-success"><span id="netRecPkg">{{ net.packets_recv }}</span>个</label></p></div>
                    <div class="col-md-2"></div>
                </div>
                <div class="row">
                    <div class="col-md-2"></div>
                    <div class="col-md-2"><p class="title-p">接收错误: <label class="label label-danger"><span id="netRecErr">{{ net.errin }}</span>个</label></p></div>
                    <div class="col-md-2"><p class="title-p">发送错误: <label class="label label-danger"><span id="netSendErr">{{ net.errout }}</span>个</label></p></div>
                    <div class="col-md-2"><p class="title-p">接收丢包: <label class="label label-danger"><span id="netRecDrop">{{ net.dropin }}</span>个</label></p></div>
                    <div class="col-md-2"><p class="title-p">发送丢包: <label class="label label-danger"><span id="netSendDrop">{{ net.dropout }}</span>个</label></p></div>
                    <div class="col-md-2"></div>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function (){
                sendAjax();
                setInterval("sendAjax()",5000);
            })

            function displayChart(divId, legend, yData, xData){
                let chart = echarts.init(document.getElementById(divId));
                var option = {
                    tooltip: {},
                    legend: {
                        data: [legend]
                    },
                    xAxis: {
                        data: xData,
                    },
                    yAxis: {},
                    series: [
                        {
                            name: legend,
                            type: 'line',
                            data: yData,
                        },

                    ]
                };
                chart.setOption(option);
            }

            function displayPie(res) {
                let pieChart = echarts.init(document.getElementById('diskPie'));
                let option = {
                    color: ['green', 'red'],
                    title: {
                        text: '磁盘使用情况',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        bottom: '80px',
                        data: ['已使用', '未使用']
                    },
                    series: [
                        {
                            name: '占比情况',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '50%'],
                            data: [{value: res.disk[0], name: '未用'},
                                {value: res.disk[1], name: '已用'}],
                            /*在series中添加itemStyle即可直观显示饼型数值*/
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        formatter: '{b} : {c} ({d}%)'
                                    },
                                    labelLine: {show: true}
                                }
                            }
                        }
                    ]
                };
                pieChart.setOption(option);
            }

            function sendAjax(){
                $.ajax({
                    url:"/backend/server-status/",
                    type: 'post',
                    success: function (res){
                        $("#cpuRate").text(res.cpu_rates[res.cpu_rates.length -1]);
                        displayChart("cpuRateCurve", 'cpu使用率', res.cpu_rates, res.times);
                        displayChart("memoryRateCurve", '内存使用率', res.mem_rates, res.times);
                        displayPie(res);
                        $("#netSend").text(res.net[0]);
                        $("#netRec").text(res.net[1]);
                        $("#netSendPkg").text(res.net[2]);
                        $("#netRecPkg").text(res.net[3]);
                        $("#netRecErr").text(res.net[4]);
                        $("#netSendErr").text(res.net[5]);
                        $("#netRecDrop").text(res.net[6]);
                        $("#netSendDrop").text(res.net[7]);
                    }
                })
            }
        </script>
    </main>
{% endblock %}